<template>
  <div>
    <van-tabbar v-if="str" v-model="active" @change="onChange">
      <van-tabbar-item name="index" route icon="home-o">外卖</van-tabbar-item>
      <van-tabbar-item route name="search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item name="orders" route icon="friends-o"
        >订单</van-tabbar-item
      >
      <van-tabbar-item name="my" route icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  props: {
    str: {
      type: String,
    },
  },
  data() {
    return {
      active: "",
    };
  },
  created() {
    this.active = this.str;
  },
  methods: {
    onChange(index) {
      this.active = "my";
      if (index == "my") {
        this.$router.push({
          path: "/my",
          query: {
            active: this.active,
          },
        });
      } else if (index == "orders") {
        this.active = "orders";
        this.$router.push({
          path: "/dingdan",
          query: {
            active: this.active,
          },
        });
      } else if (index == "index") {
        this.active = "index";
        this.$router.push({
          path: "/index",
          query: {
            active: this.active,
          },
        });
      } else {
        this.active = "search";
        this.$router.push({
          path: "/search",
          query: {
            active: this.active,
          },
        });
      }
    },
  },
};
</script>

<style>
</style>